<!-- 装修商品组件：商品栏 -->
<template>
	<view>
		<!-- 爆品推荐 -->
		<image v-if="productList.length==0 && goodsList.length!=0" src="../../../static/images/recommend_title.png"
			class="recommend_title" mode="heightFix"></image>
		<!-- 布局1. 两列商品，图片左文案右 -->
		<view v-if="layoutType === 'twoCol'" class="goods-xs-box ss-flex ss-flex-wrap"
			:style="[{ margin: '-' + data.space + 'rpx' }]">
			<view class="goods-xs-list" v-for="item in goodsList" :key="item.id" :style="[
          {
            padding: data.space + 'rpx',
          },
        ]">
				<s-goods-column class="goods-card" size="xs" :goodsFields="data.fields" :tagStyle="data.badge"
					:data="item" :titleColor="data.fields.name?.color" :topRadius="data.borderRadiusTop"
					:bottomRadius="data.borderRadiusBottom"
					:titleWidth="(454 - marginRight * 2 - data.space * 2 - marginLeft * 2) / 2"
					@click="sheep.$router.go('/pages/goods/index', { id: item.id })" />
			</view>
		</view>
		<!-- 布局. 两列商品：图片上文案下 -->
		<view v-if="layoutType === 'threeCol'" class="goods-sm-box ss-flex ss-flex-wrap"
			:style="[{ margin: '-' + data.space + 'rpx' }]">
			<view v-for="item in goodsList" :key="item.id" class="goods-card-box" :style="[
          {
            padding: data.space + 'rpx',
          },
        ]">
				<s-goods-column class="goods-card" size="sm" :goodsFields="data.fields" :tagStyle="data.badge"
					:data="item" :titleColor="data.fields.name?.color" :topRadius="data.borderRadiusTop"
					:bottomRadius="data.borderRadiusBottom"
					@click="sheep.$router.go('/pages/goods/index', { id: item.id })" />
			</view>
		</view>

		<!-- 布局3. 一行商品，水平滑动 -->
		<view v-if="layoutType === 'horizSwiper'" class="">
			<scroll-view class="scroll-box goods-scroll-box" scroll-x scroll-anchoring>
				<view class="goods-box ss-flex">
					<view class="goods-card-box" v-for="item in goodsList" :key="item.id"
						:style="[{ marginRight: data.space * 2 + 'rpx' }]">
						<s-goods-column class="goods-card" size="sm" :goodsFields="data.fields" :tagStyle="data.badge"
							:data="item" :titleColor="data.fields.name?.color"
							:titleWidth="(750 - marginRight * 2 - data.space * 4 - marginLeft * 2) / 3"
							@click="sheep.$router.go('/pages/goods/index', { id: item.id })" />
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	/**
	 * 商品栏
	 */
	import {
		onMounted,
		ref,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import SpuApi from "@/sheep/api/product/spu";

	const props = defineProps({
		data: {
			type: Object,
			default () {},
		},
		styles: {
			type: Object,
			default () {},
		},
		productList: {
			type: Array,
			default () {
				return []
			}
		},
	});
	const {
		layoutType,
		spuIds
	} = props.data;
	let {
		marginLeft,
		marginRight
	} = props.styles;
	const goodsList = ref([]);
	onMounted(async () => {
		if (props.productList.length > 0) return goodsList.value = props.productList;

		if (spuIds.length > 0) {
			let {
				data
			} = await SpuApi.getSpuListByIds(spuIds.join(','));
			goodsList.value = data.list;
		}
	});
</script>

<style lang="scss" scoped>
	.recommend_title {
		width: 180rpx;
		height: 32rpx;
		margin: 16rpx 0;
	}

	.goods-xs-box {
		// margin: 0 auto;
		width: 100%;

		.goods-xs-list {
			box-sizing: border-box;
			flex-shrink: 0;
			overflow: hidden;
			width: 50%;
		}
	}

	.goods-sm-box {
		margin: 0 auto;
		box-sizing: border-box;
		.goods-card-box {
			flex-shrink: 0;
			overflow: hidden;
			width: 47%;
			margin: calc(6% / 4);
			box-sizing: border-box;
		}
	}

	.goods-scroll-box {
		margin: 0 auto;
		width: 100%;
		box-sizing: border-box;
	}
</style>